<template>
  <div class="box">
    <div class="left">
      <ul class="clearfix">
        <router-link to="/" tag="li" active-class="index" exact>主页</router-link>
        <router-link to="/nav1" tag="li">导航1</router-link>
        <router-link to="/nav2" tag="li">导航2</router-link>
        <router-link to="/nav3" tag="li">导航3</router-link>
      </ul>
    </div>
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>

<style scoped>
  *{margin:0 ;padding:0;}
  li{
    width:100%;height:30px;line-height:30px;
  }

  li.index{
    background:#999;color:red;
  }

  .router-link-active{
    color:red;
  }

  .left{
    float:left;width:200px;
  }
  .right{
    float:left;width:800px;
  }
</style>

<script>

</script>
